<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <jsp:include page="/WEB-INF/views/admin/common/import.jsp">
        <jsp:param name="title" value="订单管理"/>
    </jsp:include>
    <style>
        .order-item {
            background-color: #f8f9fa;
            padding: 10px;
            margin-bottom: 5px;
            border-radius: 4px;
        }

        .status-pending {
            color: #ffc107;
        }

        .status-paid {
            color: #28a745;
        }

        .status-cancelled {
            color: #dc3545;
        }
    </style>
</head>
<body>
<div class="grid-container">
    <jsp:include page="/WEB-INF/views/admin/common/navbar.jsp">
        <jsp:param name="active" value="order"/>
    </jsp:include>

    <jsp:include page="/WEB-INF/views/admin/common/header.jsp">
        <jsp:param name="title" value="订单管理"/>
    </jsp:include>

    <main class="p-4">
        <form class="mb-4" action="${pageContext.request.contextPath}/admin/order?method=query" method="post">
            <div class="row g-3">
                <div class="col-md-3">
                    <input type="text" class="form-control" id="number" placeholder="订单编号"
                           value="${number}" name="number">
                </div>
                <%--                <div class="col-md-3">--%>
                <%--                    <input type="text" class="form-control" id="userId" placeholder="用户ID"--%>
                <%--                           value="${userId}" name="userId">--%>
                <%--                </div>--%>
                <%--                <div class="col-md-3">--%>
                <%--                    <select class="form-select" id="status" name="status">--%>
                <%--                        <option value="">全部状态</option>--%>
                <%--                        <option value="0" ${status == '0' ? 'selected' : ''}>待付款</option>--%>
                <%--                        <option value="1" ${status == '1' ? 'selected' : ''}>已支付</option>--%>
                <%--                        <option value="9" ${status == '9' ? 'selected' : ''}>已取消</option>--%>
                <%--                    </select>--%>
                <%--                </div>--%>
                <div class="col-md-3">
                    <button type="submit" class="btn btn-primary">查询</button>
                    <%--                    <a class="btn btn-success btn-xs ms-2"--%>
                    <%--                       href="${pageContext.request.contextPath}/orderCreate.mall">新增订单</a>--%>
                </div>
            </div>
            <!-- 隐藏的分页参数 -->
            <input type="hidden" name="pageNum" value="1">
            <input type="hidden" name="pageSize" value="10">
        </form>

        <table class="table table-bordered table-hover align-middle">
            <thead>
            <tr>
                <%--            <th>ID</th>--%>
                <th>订单编号</th>
                <%--            <th>用户ID</th>--%>
                <th>收货人</th>
                <th>手机号</th>
                <th>地址</th>
                <th>总金额</th>
                <%--            <th>下单时间</th>--%>
                <%--            <th>支付时间</th>--%>
                <th>状态</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <c:forEach items="${list}" var="order">
                <tr>
                        <%--                <td>${order.id}</td>--%>
                    <td>${order.number}</td>
                    <td>${order.name}</td>
                    <td>${order.phone}</td>
                    <td>${order.address}</td>
                        <%--                <td>${order.userId}</td>--%>
                    <td>${order.totalPrice}</td>
                        <%--                <td><fmt:formatDate value="${order.orderTime}" pattern="yyyy-MM-dd HH:mm:ss"/></td>--%>
                        <%--                <td> ${order.payTime} </td>--%>
                    <td>
                        <c:choose>
                            <c:when test="${order.status == 0}">
                                <span class="status-pending">待付款</span>
                            </c:when>
                            <c:when test="${order.status == 1}">
                                <span class="status-paid">已支付</span>
                            </c:when>
                            <c:when test="${order.status == 9}">
                                <span class="status-cancelled">已取消</span>
                            </c:when>
                        </c:choose>
                    </td>
                    <td>
                        <div class="action">
                                <%--                        <a class="btn btn-primary btn-sm"--%>
                                <%--                           href="${pageContext.request.contextPath}/orderUpdate?id=${order.id}">编辑</a>--%>
                                <%--                        <a class="btn btn-outline-danger btn-sm"--%>
                                <%--                           href="${pageContext.request.contextPath}/orderRemove?id=${order.id}"--%>
                                <%--                           onclick="return confirm('确定要删除此订单吗？')">删除</a>--%>


                            <button class="btn btn-info btn-sm" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#items-${order.id}" aria-expanded="false">
                                查看详情
                            </button>
                            <c:choose>
                                <c:when test="${order.status == 0}">
                                    <a href="${pageContext.request.contextPath}/admin/order?method=pay&orderId=${order.id}"
                                       class="btn btn-sm btn-primary me-2">支付订单</a>
                                    <a href="${pageContext.request.contextPath}/admin/order?method=cancel&orderId=${order.id}"
                                       class="btn btn-sm btn-outline-secondary">取消订单</a>
                                </c:when>
                                <%--                            <c:when test="${order.status == 1}">--%>
                                <%--                                <span class="status-paid">已支付</span>--%>
                                <%--                            </c:when>--%>
                                <%--                            <c:when test="${order.status == 9}">--%>
                                <%--                                <span class="status-cancelled">已取消</span>--%>
                                <%--                            </c:when>--%>
                            </c:choose>
                        </div>
                    </td>
                </tr>
                <tr class="collapse" id="items-${order.id}">
                    <td colspan="8">
                        <c:forEach items="${order.orderItemList}" var="item">
                            <div class="order-item d-flex align-items-center">
                                <img
                                <c:choose>
                                <c:when test="${item.product.image != null && item.product.image.contains('.')}">
                                        src="${pageContext.request.contextPath}/image/product/${item.product.image}"
                                </c:when>
                                <c:otherwise>
                                        src="${pageContext.request.contextPath}/imageDownload?id=${item.product.image}"
                                </c:otherwise>
                                </c:choose>
                                        class="img-thumbnail me-3 flex-shrink-0"
                                        style="width: 80px; height: 100px; object-fit: contain;"
                                        alt="${item.product.name}">
                                <div class="flex-grow-1 me-3">
                                    <div class="product-title">${item.product.name}</div>
                                        <%--                                    <div class="product-author">${item.product.description}</div>--%>
                                </div>
                                <div class="text-end me-3">
                                    <div class="text-danger fw-bold">¥${item.price}</div>
                                    <div class="text-muted">x${item.quantity}</div>
                                </div>
                                <div class="fw-bold text-nowrap">
                                    ¥<fmt:formatNumber value="${item.price * item.quantity}" pattern="#,##0.00"/>
                                </div>
                            </div>
                        </c:forEach>
                    </td>
                </tr>
            </c:forEach>
            </tbody>
        </table>

        <!-- 分页组件 -->
        <c:if test="${pages >= 1}">
            <div class="d-flex justify-content-between align-items-center">
                <div class="page-info text-muted">
                    共 ${total} 条记录，第 ${pageNum}/${pages} 页
                </div>
                <nav>
                    <ul class="pagination">
                        <!-- 上一页 -->
                        <li class="page-item ${pageNum <= 1 ? 'disabled' : ''}">
                            <a class="page-link"
                               href="${pageContext.request.contextPath}/admin/product?method=query&id=${id}&pageNum=${pageNum - 1}&pageSize=${pageSize}"
                                ${pageNum <= 1 ? 'tabindex="-1" aria-disabled="true"' : ''}>
                                上一页
                            </a>
                        </li>

                        <!-- 页码 -->
                        <c:forEach begin="1" end="${pages}" var="i">
                            <c:choose>
                                <c:when test="${i == pageNum}">
                                    <li class="page-item active" aria-current="page">
                                        <span class="page-link">${i}</span>
                                    </li>
                                </c:when>
                                <c:when test="${i >= pageNum - 2 && i <= pageNum + 2}">
                                    <li class="page-item">
                                        <a class="page-link"
                                           href="${pageContext.request.contextPath}/admin/product?method=query&id=${id}&pageNum=${i}&pageSize=${pageSize}">${i}</a>
                                    </li>
                                </c:when>
                                <c:when test="${i == 1 || i == pages}">
                                    <li class="page-item">
                                        <a class="page-link"
                                           href="${pageContext.request.contextPath}/admin/product?method=query&id=${id}&pageNum=${i}&pageSize=${pageSize}">${i}</a>
                                    </li>
                                </c:when>
                                <c:when test="${i == pageNum - 3 || i == pageNum + 3}">
                                    <li class="page-item disabled">
                                        <span class="page-link">...</span>
                                    </li>
                                </c:when>
                            </c:choose>
                        </c:forEach>

                        <!-- 下一页 -->
                        <li class="page-item ${pageNum >= pages ? 'disabled' : ''}">
                            <a class="page-link"
                               href="${pageContext.request.contextPath}/admin/product?method=query&id=${id}&pageNum=${pageNum + 1}&pageSize=${pageSize}"
                                ${pageNum >= pages ? 'tabindex="-1" aria-disabled="true"' : ''}>
                                下一页
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </c:if>
    </main>
</div>
</body>
</html>
